<template>
    <img :src="image" :style="imageStyle"/>
</template>

<script>
export default {
    name: 'KAvatar',
    props: {
        src: String,
        size: {
            type: Number,
            default: 32,
        }
    },
    computed: {
        image() {
            if (!this.src) {
                return require('../assets/images/user.jpg');
            }
            return this.src;
        },
        imageStyle() {
            let list = {
                display: 'inline-block'
            };
            if (this.size) {
                return {
                    width: `${this.size}px`,
                    height: `${this.size}px`,
                };
            }
            return list;
        }
    }
}
</script>

<style scoped lang="scss">
.image {
    display: inline-block;
}
</style>
